.catalog-list{
  list-style: none;
  margin: 0 0 0 -31px;
  padding: 0;

  li{
    display: inline-block;
    margin: 0 0 38px 31px;
    vertical-align: top;
  }
  .favorite{
    position: absolute;
    margin:213px 0 0 -24px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    fill: #ff4800;
  }
  .favorite svg{
    fill: #ff4800;
  }
  a.more:hover .title {
     background: rgba(0,0,0,.5);
   }
  a.more {
    .title {
      transition: .3s ease-in-out;
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.3);
      top:0;
      left:0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        display: inline-block;
        padding: 7px 18px;
        background: #fff;
        border-radius: 38px;
        height: 38px;
        font-size: 16px;
      }
    }
  }
  a{
    display: inline-block;
    color: rgba(0,0,0,.65);
    width: 200px;
    position: relative;
    .title{
      display: inline-block;
      width: 178px;
      height: 1.2em;
      overflow:hidden;
      white-space:nowrap;
      text-overflow: ellipsis;
      margin-top: 13px;
    }
    .pic{
      width: 200px;
      height: 200px;
      overflow: hidden;
      border-radius: 8px;
      filter: drop-shadow(0px 1px 2px rgba(0,0,0,.15));
      display: inline-block;
      position: relative;
    }
    img{
      max-height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  a:hover{
    color: #ff4800;
  }
}